<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- DOM:文档对象模型 -->
    <!-- 准备标签 -->
     <div class="box">hello</div>
     <div class="box1">world</div>
     <div class="box2">前端真好玩</div>
     <div class="box3">跟着静姐学前端</div>
     <p>使用DOM操作元素</p>
     <p class="box">这是有类名的p标签</p>
     <div id="box">
        <h1>这是div中的一级标题</h1>
     </div>
</body>
<script>
    //获取页面元素：querySelector()和querySelectorAll()
    //做认识：getElementById()、getElementByTagName()、getElementByName()、getElementByClassName()、
    //let const
    //querySelector()只会获取第一个元素:选择器可以是标签选择器、类选择器(.类名)和ID选择器(#ID名)
    const elm1 = document.querySelector('div');   //通过标签选择
    console.log(elm1);
    const elm2 = document.querySelector('.box1');   //通过类选择器拿到元素
    console.log(elm2);
    const elm3 = document.querySelector('#box h1 li:nth-child(5)');   //复合选择器
    console.log(elm3);
    console.log('-----------');
    const em1 = document.querySelectorAll('div');
    console.log(em1);   //伪数组
    for (let i=0;i<em1.length;i++){
        console.log(em1[i]);
    }
    em1[2].style.color='red';

</script>
</html>